<template>
  <div @keyup.enter="getData()">
    <el-form :inline="true" :model="params">
      <el-form-item>
        <el-input v-model="params.agency_name" placeholder="机构名称查询"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()" icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table border v-loading="loading" :data="tableData">
      <el-table-column align="center" label="机构名称" prop="agency_name"></el-table-column>
      <el-table-column align="center" :label="'项目数量(' + customer + ')'">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-if="scope.row.customer_count && +scope.row.customer_count > 0"
            @click="showDetail(scope.row)"
          >
            {{ scope.row.customer_count }}
          </el-button>
          <span v-else>{{ scope.row.customer_count }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="'在保余额(' + amount + '万元)'">
        <template slot-scope="scope">
          {{ scope.row.left_funds || '0.00' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="保证金/资本金/资金池(万元)">
        <template slot-scope="scope">
          {{ scope.row.margin_amount || '0.00' }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="资金放大倍数">
        <template slot-scope="scope">
          <span>{{ scope.row.expand_times || 0 }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="query-pagination">
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <org-count-credit-detail
      :visible.sync="editVisible"
      :item-data="editRow"
    ></org-count-credit-detail>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { queryTrouble } from '@vimi/utils-api'
import OrgCountCreditDetail from './OrgCountCreditDetail'
export default {
  components: {
    OrgCountCreditDetail,
  },
  props: {},
  data() {
    return {
      tableData: [],
      customer: 0,
      amount: 0,
      totalCount: 0,
      loading: false,
      params: {
        index: 1,
        size: 10,
        agency_name: '',
        'agency_type.eq': 6,
      },
      tableName: 'credit_agency_info',
      editVisible: false,
      editRow: {},
    }
  },
  computed: {
    ...mapGetters(['clientId', 'user']),
    isUserTown() {
      return this.user.orgRegionLever === 3
    },
  },
  created() {
    if (this.isUserTown) {
      this.params['service_id.eq'] = this.clientId
    } else {
      this.params.address_code = this.$utils.getAddressCode()
    }
    this.getData()
  },
  methods: {
    getData(aindex = 1) {
      this.params.index = aindex
      if (!this.tableName) {
        return
      }
      this.loading = true
      const { index, size, ...params } = this.params
      const url = queryTrouble(this.tableName, {
        ...params,
        groupFunc: 'SUM(customer_count),SUM(left_funds)',
      })

      this.$api
        .getData('credit', this.tableName, this.params, {
          customer_count: 'desc',
        })
        .then(res => {
          this.tableData = res.data.data
          this.totalCount = res.data.totalCount
        })
        .finally(() => {
          this.loading = false
        })

      this.$api.getDataQuery('credit', this.tableName, url).then(res => {
        const count = (res && res.data && res.data[0]) || {}
        this.customer = count.p || 0
        this.amount = count.p1 || 0
      })
    },
    showDetail(row) {
      this.editVisible = true
      this.editRow = { ...row }
    },
  },
}
</script>

<style scoped></style>
